<template>
  <div class="week-container">
    <div v-for="(item, index) in 24" :key="item" class="flex week-list">
      <span class="week-list__time">{{ formatTime(index) }}</span>
      <div v-for="(item, i) in 7" :key="i" class="week-item">
        <div v-for="(render, j) in renderList(index, i)" :key="j">
          <schedule-mode-item v-bind="render" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const scheduleStore = useSchedule()
const { list } = storeToRefs(scheduleStore)
// 星期对应日期列表

// 格式化时间
const formatTime = (hours: number) => {
  const str = hours < 10 ? `0${hours}` : hours
  return `${str}:00`
}

const renderList = (hours: number, index: number) => {
  return list.value
    .filter((item) => {
      // 截取时分秒
      const timePart = item.startAt.split(' ')[1]
      // 当前截取-时
      const nowHours = timePart.split(':')[0]
      return (
        Number(nowHours) === hours &&
        item.startAt.includes(scheduleStore.formatWeekDate(index, '-'))
      )
    })
    .map((item) => {
      // 截取开始时间时分秒
      const startTimePart = item.startAt.split(' ')[1]
      // 开始时间-分
      const startMin = startTimePart.split(':')[1]
      // 截取结束时间时分秒
      const endTimePart = item.endAt.split(' ')[1]
      // 结束时间-时
      const endHours = endTimePart.split(':')[0]
      // 结束时间-分
      const endMin = endTimePart.split(':')[1]
      return {
        ...item,
        top: (100 / 60) * Number(startMin),
        height: (Number(endHours) - hours) * 100 + (100 * Number(endMin)) / 60
      }
    })
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/index.scss';
.week {
  &-container {
    padding: $space-default;
    box-sizing: border-box;
  }
  &-item {
    flex: 1;
    background-color: #fff;
    height: $schedule-item-height;
    border-bottom: 1px solid $border-color;
    position: relative;
    &:not(:nth-last-child(1)) {
      border-right: 1px solid $border-color;
    }
  }
  &-list {
    &__time {
      margin-top: -12px;
      margin-right: $space-default;
    }
  }
}
</style>
